<template>
  <div>
    <el-card>
      <el-form ref="addref" :rules="addrules" :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="仓库编码" prop="code">
          <el-input v-model="formInline.code" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="仓库名称" prop="name">
          <el-input v-model="formInline.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="仓库类型" prop="type">
          <el-select v-model="formInline.type" placeholder="请选择">
            <el-option label="中转仓" value="中转仓" />
            <el-option label="加工仓" value="加工仓" />
            <el-option label="储备仓" value="储备仓" />
            <el-option label="冷藏仓" value="冷藏仓" />

          </el-select>
        </el-form-item>
        <el-form-item label="省/市/区" class="lang" prop="location">
          <el-cascader
            v-model="location"
            :options="options"
            placeholder="请选择"
            @change="handleChange"
          />
        </el-form-item>
        <el-form-item label="详细地址" class="lang" prop="address">
          <el-input v-model="formInline.address" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="仓库状态" placeholder="请选择" class="radio">
          <el-radio v-model="formInline.status" label="0">启用</el-radio>
          <el-radio v-model="formInline.status" label="1">停用</el-radio>
        </el-form-item>
        <el-form-item label="仓库面积" prop="surface">
          <el-input v-model="formInline.surface" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="负责人" prop="personName">
          <el-input v-model="formInline.personName" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="formInline.phone" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button @click="$router.go(-1)">返回</el-button>
          <el-button type="primary" @click="Submit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { regionData, CodeToText } from 'element-china-area-data'
import { nextBianhao, AddList, BianJiList, BianJi } from '@/api'
export default {
  data() {
    return {
      current: '',
      id: {},
      location: '',
      options: regionData,
      formInline: {
        code: '',
        name: '',
        type: '',
        location: '',
        address: '',
        surface: '',
        personName: '',
        phone: '',
        province: '',
        area: '',
        city: '',
        status: ''
      },
      addrules: {
        name: [{ required: true, message: '请输入仓库名称', trigger: 'blur' }],
        type: [{ required: true }],
        location: [{ required: true }],
        personName: [{ required: true, message: '请输入负责人姓名', trigger: 'blur' }],
        phone: [{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }]

      },
      // radio: '1'
      radio: [
        { label: '启用', value: 0 },
        { label: '停用', value: 1 }
      ]
      // params: {
      //   name: 'CK'
      // }
    }
  },
  computed: {
    title() {
      return this.current ? '编辑部门' : '新增部门'
    }

  },
  async created() {
    this.nextOneBianhao()
    console.log(this.$route)
    this.current = this.$route.query.id
    console.log(this.current)
    this.$route.meta.title = this.current ? '编辑部门' : '新增部门'
    if (this.current) {
      const res = await BianJiList(this.current)
      this.formInline = res.data
      this.location = res.data.area
      this.formInline.status = res.data.status + ''
    }
  },
  methods: {
    async nextOneBianhao() {
      const res = await nextBianhao()
      this.formInline.code = res.data
    },
    Submit() {
      this.$refs.addref.validate(async(valid) => {
        if (!valid) return
        if (this.current) {
          await BianJi(this.formInline)
        } else {
          const res = await AddList(
            this.formInline
          )
          console.log(res)
        }

        this.$message.success(this.title + '成功')
        this.nextOneBianhao()
      })
    },
    handleChange(val) {
      let res = ''
      for (let i = 0; i < this.location.length; i++) {
        res += '/' + CodeToText[this.location[i]]
      }
      this.formInline.location = res.slice(1)
      this.formInline.province = val[0]
      this.formInline.area = val[1]
      this.formInline.city = val[2]

      console.log(this.formInline.province)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form.demo-form-inline.el-form--inline{
 display: flex;
 align-items: center;
 flex-wrap: wrap;
}
.el-form-item{
 display: flex;
 flex-wrap: wrap;
 flex-direction: column;
 align-items: flex-start;
 justify-items: center;
 width: 350px;
 margin-left: 30px;
 &.lang{
width: 750px;
 }
 &.radio{
  width: 400px;
 }
 &:last-child{
  width: 100%;
  ::v-deep .el-form-item__content{
   display: flex;
   justify-content: center;
   align-content: center;
  }
 }
::v-deep .el-form-item__content{
 flex: 1;
 width: 100%;
 .el-select{
  width: 100%;
 }
 .el-input__inner{
  background-color: #f8f5f5;
 }
 .el-button{
  width: 170px;
  height: 40px;
  padding:1px 15px;
  margin: 16px;
  color: #000;
  border-radius: 20px;
 }
}
}
</style>
